<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>组件基础</title>
        <style>
            .arithmetic-operation { border: 1px solid blue; margin: 10px auto; }
            .active { background: #ff7033; }
        </style>
    </head>
    <div>

        <div id="application" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>

            const ArithmeticOperation = {
                props: {
                    actived: {
                        type: Boolean,
                        required: false,
                        default: false
                    },
                    firstOperand: {
                        type: Number,
                        required: false,
                        default: 1
                    },
                    secondOperand: {
                        type: Number,
                        required: false,
                        default: 1
                    },
                    operator: {
                        type: String,
                        required: false,
                        validator(value){
                            return ['+', '-', '*', '/', '%', '**'].includes(value);
                        },
                        default(){
                            return '+'
                        }
                    }
                },
                template: `<div :class="{ 'arithmetic-operation': true, 'active': actived }">
                            {{firstOperand}} {{operator}} {{secondOperand}} = {{result}}
                           </div>`,
                computed: {
                    result() {
                        switch(this.operator){
                            case '+': return this.firstOperand + this.secondOperand;
                            case '-': return this.firstOperand - this.secondOperand;
                            case '*': return this.firstOperand * this.secondOperand;
                            case '/': return this.firstOperand / this.secondOperand;
                            case '%': return this.firstOperand % this.secondOperand;
                            case '**': return this.firstOperand ** this.secondOperand;
                            default: return '';
                        }
                    }
                }
            }

            const App = {
                components: {
                    ArithmeticOperation
                },
                template: `<div class="wrapper">
                              <ArithmeticOperation :first-operand="123" 
                                                   :second-operand="2" 
                                                   operator="*">
                              </ArithmeticOperation>
                              <ArithmeticOperation actived></ArithmeticOperation>
                              <ArithmeticOperation :actived="true"></ArithmeticOperation>
                           </div>`
            }
            
            const app = Vue.createApp(App);
            app.mount('#application');
        </script>
    </div>
</html>